<!--
## 16、Vue：computed计算属性

> 目标: 掌握compued计算属性的使用
在插值表达式中使用js做运算非常方便。但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，这个时候就可以用计算属性。
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs计算属性</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- 插值表达式 -->
    <h2>{{new Date(milliseconds).getFullYear() + "年" + new Date(milliseconds).getMonth() + "月" + new Date(milliseconds).getDate()}}</h2>
    <!-- 计算属性 (注意：它不是一个函数) -->
    <h2>{{time}}</h2>
</div>

<script type="text/javascript">
    var vue = new Vue({
        el: '#app', // 渲染的html元素
        data: { // 数据对象
            milliseconds: 1573878276849,
        },
        computed: { // 计算属性
            time() { // time属性
                const date = new Date(this.milliseconds);
                return date.getFullYear() + "年" + date.getMonth() + "月" + date.getDate() + "日" + date.getHours() + "时";
            }
        }
    });
</script>
</body>
</html>